#include('header.html')
<link rel="stylesheet" href="/static/style/editor.css">

<style type="text/css">
  .note {
    margin: 50px auto;
    width: 700px;
  }
  .note > div.note-title > p {
    margin: 20px 0 25px;
  }
  .note > div.note-content {
    word-break: break-all;
  }
  .note > div.note-footer {
    margin: 40px 0 0;
  }
  @media screen and (max-width: 700px) {
    div.note {
      margin: 20px 0;
      width: auto;
    }
  }
</style>

<div class="show">
  <div class="container">
    <div class="note">
      <div class="note-title text-center">
        <h1>${article.title }</h1>
        <p class="text-muted">时间:
          <time>${article.time.format('yyyy-MM-dd HH:mm:ss') }</time>&nbsp;&nbsp;阅读: ${article.views }
        </p>
      </div>
      <div class="note-content"><!-- ajax加载数据 --></div>
      <div class="note-footer">
        <div class="text-center">
          <button onclick="like(${article.id });" class="btn btn-info">点赞&nbsp;|&nbsp;<span>${article.likes }</span>
          </button>
          <a href="javascript:" onclick="history.back();" class="btn  btn-default">返回列表</a>
        </div>
        <hr>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $.ajax({
    url: '${article.path }',
    type: 'GET',
    dataType: 'html',
    cache: true,
    beforeSend: function () {
      $('div.note-content').html("<div style='margin: 35px; text-align: center;'><b>正在加载数据请稍候...</b></div>");
    },
    success: function (data) {
      $('div.note-content').html(data);
    }
  }).fail(function () {
    console.log("error");
  });

  var can = true;  // 每次只能点赞一次
  var btn = $('button > span');

  function like(id) {
    if (can === true) {
      $.post('/article/addLike/' + id);
      var num = parseInt(btn.text());
      btn.text(num + 1);
    }
    can = false;
  }
</script>
#include("footer.html")
